<template>
  <div class="pet-info" v-loading="loading">
    <el-table :data="tableData" stripe style="width: 95%" border>
      <el-table-column align="center" label="分类" width="180">
        <template #default="scope">
          <span v-if="scope.row.reportCategory === '0'"> 宠物方面</span>

          <span v-else-if="scope.row.reportCategory === '1'">住户方面</span>
          <span v-else-if="scope.row.reportCategory === '2'"
            >社区管理人方面</span
          >
          <span v-else-if="scope.row.reportCategory === '3'">其他方面</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="内容"
        width="180"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="updateTime"
        label="时间"
        align="center"
        empty-text
      ></el-table-column>
      <el-table-column align="center" prop="handleStatus" label="处理状态">
        <template #default="scope">
          <el-button
            size="small"
            v-if="scope.row.handleStatus === 0"
            @click="
              (scope.row.handleStatus = 1), handleReceiptStutas(scope.row.id)
            "
          >
            未确认
          </el-button>
          <el-button
            size="small"
            type="primary"
            v-if="scope.row.handleStatus === 1"
          >
            已确认
          </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="applyStatus" label="申请记录">
        <template #default="scope">
          <el-button
            size="small"
            v-if="scope.row.applyStatus === 0"
            @click="handleShowApplyDialog(scope.row.id)"
          >
            未申请
          </el-button>
          <el-button
            size="small"
            type="success"
            v-if="scope.row.applyStatus === 1"
          >
            已申请
          </el-button>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="examineStatus" label="审核状态" /> -->

      <el-table-column align="center" prop="examineStatus" label="审核状态">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            v-if="scope.row.examineStatus === 0"
            @click="handleShowApplyDialog"
          >
            审核中
          </el-button>
          <el-button
            size="small"
            type="danger"
            v-else-if="scope.row.examineStatus === 1"
          >
            审核未通过
          </el-button>
          <el-button
            size="small"
            type="success"
            v-else-if="scope.row.examineStatus === 2"
          >
            审核通过
          </el-button>
          <el-button size="small" v-else> 无 </el-button>
        </template>
      </el-table-column>
      <el-table-column align="center" label="查看">
        <template #default="scope">
          <el-button size="small" @click="handleCheck(scope.row)"
            >查看被举报详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div style="width: 95%; margin-top: 10px">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 15, 20, 25]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
  <ContextDialog ref="contextDialogRef" />
  <ApplyDialog @refreshTableData="getTableData" ref="applyDialogRef" />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import {
  listBadReportInfoCheckByUser,
  updateReportHandleStatus,
} from "@/api/owner";
import { ElMessage } from "element-plus";
import ContextDialog from "./context-dialog.vue";
import ApplyDialog from "./apply-dialog.vue";

const loading = ref<boolean>(false);

//弹框
const contextDialogRef = ref();
const applyDialogRef = ref();
const handleCheck = (data: any) => {
  contextDialogRef.value.showDialog(data);
};
const handleShowApplyDialog = (id: any) => {
  applyDialogRef.value.showDialog(id);
};
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

const handleSizeChange = () => {
  getTableData();
};
const handleCurrentChange = async () => {
  getTableData();
};
//确认知道
const handleReceiptStutas = (id: any) => {
  updateReportHandleStatus(id).then((res: any) => {
    ElMessage({
      message: res.message,
      type: "success",
    });
  });
};
const getTableData = async () => {
  loading.value = true;
  await listBadReportInfoCheckByUser(currentPage.value, pageSize.value).then(
    (res: any) => {
      total.value = +res.total;
      tableData.value = res.data;
    }
  );
  loading.value = false;
};
onMounted(() => {
  getTableData();
});
</script>

<style scoped lang="less">
.pet-info {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding-top: 10px;
  :deep(.el-popper) {
    display: none;
  }
}
</style>
